import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { activeBar } from 'utils/mixins';

const StyledMenuItem = styled.div`
    width:100%;
    height:74px;

    display:flex;
    justify-content:center;
    align-items:center;

    ${activeBar()};
    ${({ active }) => active ? "" : `::before,::after {height:0}`};
`;

const MenuIcon = styled(FontAwesomeIcon)`
    color:white;
    font-size:24px;
    opacity:${({ active }) => (active ? 1 : 0.3)};
`;

const StyleNavBar = styled.div``;

export default StyleNavBar;

export { StyledMenuItem, MenuIcon };